import React from 'react'
import * as $helpers from '../helpers'
import * as $consts from '../consts'
import purify from '../../component/purify'

const styles = {
  ellipsisText: {
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  }
}

const {
  translateAgeType,
  formatDate,
  translateIdentityType
} = $helpers

export default PageTravellers

function PageTravellers (props) {
  const { persons, currentPage } = props
  return (
    <div>
      {persons.map(createTraveler(currentPage))}
    </div>
  )
}

const createTraveler = currentPage =>
  (value, index) => (
    <StatelessTraveler
      key={`traveller-${index}`}
      currentPage={currentPage}
      value={value}
      index={index}
    />
  )

function StatelessTraveler ({ value, index, currentPage }) {
  const {
    AgeType,
    TravellerName,
    BirthDate,
    IdentityType,
    IdentityNo,
    Gender,
    Nationality,
    ContactInfo,
    IdentityExpireDate
  } = value
  const ageType = translateAgeType(AgeType)
  return (
    <div className='user_info_cont01'>
      <div className='user_icon'>
        <h4>
          出行人{index + 1 + (currentPage - 1) * $consts.TRAVELLER_LIST_PAGE_SIZE}
        </h4>
        {ageType && <span className='peo_icon'>{ageType}</span>}
      </div>
      <table className='table_fix table_gray01'>
        <ColumnGroup />
        <tbody>
          <tr>
            <th>姓名</th>
            <td style={styles.ellipsisText}>{TravellerName}</td>
            <th>性别</th>
            <td>{Gender === 'F' ? '女' : '男'}</td>
          </tr>
          <tr>
            <th>生日</th>
            <td>{formatDate(BirthDate, 'YYYY-MM-DD')}</td>
            <th>国籍</th>
            <td>{Nationality}</td>
          </tr>
          <tr>
            <th>证件信息</th>
            <td>{translateIdentityType(IdentityType)}</td>
            <th>证件号码</th>
            <td>{IdentityNo}</td>
          </tr>
          <tr>
            <th>电话</th>
            <td>{ContactInfo}</td>
            <th>证件有效期</th>
            <td>{formatDate(IdentityExpireDate, 'YYYY-MM-DD')}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

function ColumnGroup () {
  return (
    <colgroup>
      <col className='width01' />
      <col className='width02' />
      <col className='width03' />
      <col className='width04' />
    </colgroup>
  )
}
